<template>
	<view class="fil">
		<view class="formItems role">
			 <uni-data-select
				  v-model="form_data.role_id"
				  :localdata="rangeRole"
				  :clear="false"
				  @change="changeR"
				></uni-data-select>
		</view>
		<view class="formItems city">
			 <uni-data-select
				  v-model="form_data.city_id"
				  :localdata="rangeCity"
				  :clear="false"
				  @change="changeCity"
				></uni-data-select>
		</view>
		<view class="formItems country">
			 <uni-data-select
				  v-model="form_data.county_id"
				  :localdata="rangeCoun"
				  :clear="false"
				  @change="changeCoun"
				></uni-data-select>
		</view>
	</view>
</template>
<script>
	export default {
		name:"fil",
		data() {
			return {
				form_data: {
					role_id:"",
					city_id:"",
					county_id:""
				},
				rangeRole:[],
				rangeCity:[],
				rangeCoun:[{text:'请选择',value:""}]
			}
		},
		created() {
			// 
			this.getRole();
			this.getAre();
			// setTimeout(()=> {
				
			// },100)
		},
		props:['active_id'],
		methods: {
			async getRole(){
				const res = await this.$httpPub({
					  url:'activity/role/' + this.active_id,
					  method:'get',
					  data:{}
				})
				this.rangeRole = res.map((item) => {
					return {
						text:item.name,
						value:item.id
					}
				})
				this.rangeRole.unshift({
					text:'全部角色',
					value:""
				})
				
			},
			changeR() {
				this.emit();
			},
			emit() {
				this.$emit("render",this.form_data);
			},
			async getAre() {
				const res = await this.$httpPub({
					  url:'public/region',
					  data:{
						  
					  }
				})
				this.rangeCity = res.map((item) => {
					return {
						text:item.name,
						value:item.id
					}
				})
				this.rangeCity.unshift({
					text:'全省',
					value:""
				})
			},
			async changeCity(e) {
				// console.log(e);
				this.form_data.county_id = '';
				if(e) {
					this.form_data.county_id = '';
					this.getCounty(e);
				} else {
					this.rangeCoun = [{text:'请先选择城市',value:""}];
					this.emit();
				}
				
			},
			async getCounty(e) {
				// const res = await request('activity'+ this.active_id,{pid:e},"get");
				// console.log(e);
				const res = await this.$http({
					   url:'public/region',
					  method:'get',
					  data:{pid:e}
				})
				// console.log(res);
				let data = res;
				this.rangeCoun = data.map((item) => {
					return {
						text:item.name,
						value:item.id
					}
				});
				this.rangeCoun.unshift({
					text:'全部',
					value:""
				})
				this.emit();
			},
			changeCoun(e) {
				this.emit();
			}
		}
	}
</script>

<style lang="scss">
		.fil {
			// position: absolute;
			// top:325rpx;
			width: 100%;
			// padding: 0 35rpx;
			display: flex;
			box-sizing: border-box;
			justify-content: space-between;
		}
		
     .formItems {
     	// margin-right: 25rpx;
     	.fiterTag {
     		width: 198rpx;
     		height: 64rpx;
     		border: 2px solid #3e4860 !important;
     		border-radius: 10rpx;
     		background-color: #fff;
     		display: flex;
     		padding: 0 30rpx;
     		justify-content: space-between;
     		box-sizing: border-box;
     		align-items: center;
     		font-size: 26rpx;
     	}
     	&.role {
     		width: 230rpx;
     	}
     	&.city {
     		width: 198rpx;
     	}
     	&.country {
     		width: 180rpx;
     	}
     }
</style>